<template>
  <div class="echarts-outer-wrapper">
    <Title title="北京与各省际发票流向情况"></Title>
    <div class="content-wrapper">
      <div class="echart-tab-wrapper">
        <div class="tabs">
          <div
            class="tab-item"
            v-for="(item, index) in tabList"
            :key="item.id"
            :class="{ select: selectedIndex === index }"
            @click="changeTab(index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="echart-content-wrapper">
        <MapBox
          class="echart"
          v-model="chartID"
          v-if="chartID"
          :mapConfig="mapConfig"
        ></MapBox>
      </div>
    </div>
  </div>
</template>
    
<script>
import Title from "@/components/title";
import MapBox from "@/components/map";
export default {
  name: "fplxqk",
  components: {
    Title,
    MapBox,
  },
  data() {
    return {
      prevDate: null,
      tabList: [
        { id: 0, name: "与各省" },
        { id: 1, name: "与各经济区" },
      ], //tab页数据
      selectedIndex: 0, //当前被选中的tab页索引
      resData: [], //查询回来的原始数据
      EchartData: [], // 图表数据

      mapConfig: {},
      chartID: "china",
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
  },
  mounted() {
    this.changeTab(0);
    this.mapConfig = this.initEchart();

    // this.ajax({
    //   url: "/dpzsSwfpService/fplxqk",
    //   method: "post",
    //   data: {
    //     param: {
    //       tjny: this.prevDate,
    //     },
    //   },
    // }).then((res) => {
    //   res = res.data;
    //   if (res.rtnCode !== "200") {
    //     this.$message.error(res.rtnMsg);
    //     return;
    //   }
    //   this.EchartData = res.data.chinaDatas;
    //   this.mapConfig = this.initEchart();
    // });
  },
  methods: {
    //切换tab页,同时切换数据
    changeTab(index) {
      this.EchartData = [];
      this.selectedIndex = index;
      let data = [];

      // this.resData[this.selectedIndex].forEach((item, index) => {
      //   data.push({
      //     xData: item.name,
      //     bqData: item.bq,
      //     tqData: item.tq,
      //   });
      // });

      // this.$nextTick(() => {
      //   this.EchartData = data;
      // });
    },

    initEchart() {
      // let allObj = null;
      // let allArr = null;
      // let max = null;
      // let min = null;

      // allObj = this.EchartData.map((item) => {
      //   // debugger
      //   return {
      //     name: item.name,
      //     value: item.fpkjpp,
      //     fpkjpp: item.fpkjpp,
      //     fpkjzp: item.fpkjzp,
      //     fpqdpp: item.fpqdpp,
      //     fpqdzp: item.fpqdzp,
      //     myqkze: item.myqkze,
      //     myqkce: item.myqkce,
      //   };
      // });
      // console.log(allObj);

      // allArr = this.EchartData.map((item) => {
      //   return item.fpkjpp;
      // });
      // min = Math.min(...allArr);
      // max = Math.max(...allArr);
      // if (this.select == 0) {
      //   let currentData = this.EchartData.cbseList;
      //   yanshan = currentData.filter((item) => {
      //     return item.zgswjgbm == "11101910000";
      //   });
      //   jingkai = currentData.filter((item) => {
      //     return item.zgswjgbm == "11101920000";
      //   });
      //   allObj = currentData.map((item) => {
      //     return {
      //       name: item.zgswjgbm,
      //       value: item.zje,
      //       ...item,
      //     };
      //   });

      // } else if (this.select == 1) {
      //   let currentData = this.EchartData.ajsList;
      //   yanshan = currentData.filter((item) => {
      //     return item.zgswjgbm == "11101910000";
      //   });
      //   jingkai = currentData.filter((item) => {
      //     return item.zgswjgbm == "11101920000";
      //   });
      //   allObj = currentData.map((item) => {
      //     return {
      //       name: item.zgswjgbm,
      //       value: item.zsl,
      //       ...item,
      //     };
      //   });
      //   allArr = currentData.map((item) => {
      //     return item.zsl;
      //   });
      // }
      // this.newAddArea = [yanshan[0], jingkai[0]];

      let points = [
        // { value: [127.9688, 45.368], itemStyle: { color: "#00EEFF" } },
        // { value: [110.3467, 41.4899], itemStyle: { color: "#00EEFF" } },
        // { value: [125.8154, 44.2584], itemStyle: { color: "#00EEFF" } },
        // { value: [116.4551, 40.2539], itemStyle: { color: "#00EEFF" } },
        // { value: [123.1238, 42.1216], itemStyle: { color: "#00EEFF" } },
        // { value: [114.4995, 38.1006], itemStyle: { color: "#00EEFF" } },
        // { value: [117.4219, 39.4189], itemStyle: { color: "#00EEFF" } },
        // { value: [112.3352, 37.9413], itemStyle: { color: "#00EEFF" } },
        // { value: [109.1162, 34.2004], itemStyle: { color: "#00EEFF" } },
        // { value: [103.5901, 36.3043], itemStyle: { color: "#00EEFF" } },
        // { value: [106.3586, 38.1775], itemStyle: { color: "#00EEFF" } },
        // { value: [101.4038, 36.8207], itemStyle: { color: "#00EEFF" } },
        // { value: [87.611053, 43.828171], itemStyle: { color: "#00EEFF" } },
        // { value: [91.117212, 29.646922], itemStyle: { color: "#00EEFF" } },
        // { value: [103.9526, 30.7617], itemStyle: { color: "#00EEFF" } },
        // { value: [108.384366, 30.439702], itemStyle: { color: "#00EEFF" } },
        // { value: [117.1582, 36.8701], itemStyle: { color: "#00EEFF" } },
        // { value: [113.4668, 34.6234], itemStyle: { color: "#00EEFF" } },
        // { value: [118.8062, 31.9208], itemStyle: { color: "#00EEFF" } },
        // { value: [117.29, 32.0581], itemStyle: { color: "#00EEFF" } },
        // { value: [114.3896, 30.6628], itemStyle: { color: "#00EEFF" } },
        // { value: [119.5313, 29.8773], itemStyle: { color: "#00EEFF" } },
        // { value: [119.4543, 25.9222], itemStyle: { color: "#00EEFF" } },
        // { value: [116.0046, 28.6633], itemStyle: { color: "#00EEFF" } },
        // { value: [113.0823, 28.2568], itemStyle: { color: "#00EEFF" } },
        // { value: [106.6992, 26.7682], itemStyle: { color: "#00EEFF" } },
        { value: [102.9199, 25.4663], itemStyle: { color: "#00EEFF" } },
        // { value: [113.12244, 23.009505], itemStyle: { color: "#00EEFF" } },
        // { value: [108.479, 23.1152], itemStyle: { color: "#00EEFF" } },
        // { value: [110.3893, 19.8516], itemStyle: { color: "#00EEFF" } },
        // { value: [120.702967, 24.123621], itemStyle: { color: "#00EEFF" } },
        // { value: [121.4648, 31.2891], itemStyle: { color: "#00EEFF" } },
      ];
      var chinaDatas = [
        { name: "北京", value: 199 },
        { name: "天津", value: 42 },
        { name: "河北", value: 102 },
        { name: "山西", value: 81 },
        { name: "内蒙古", value: 47 },
        { name: "辽宁", value: 67 },
        { name: "吉林", value: 82 },
        { name: "黑龙江", value: 123 },
        { name: "上海", value: 24 },
        { name: "江苏", value: 92 },
        { name: "浙江", value: 114 },
        { name: "安徽", value: 109 },
        { name: "福建", value: 116 },
        { name: "江西", value: 91 },
        { name: "山东", value: 119 },
        { name: "河南", value: 137 },
        { name: "湖北", value: 116 },
        { name: "湖南", value: 114 },
        { name: "重庆", value: 91 },
        { name: "四川", value: 125 },
        { name: "贵州", value: 62 },
        { name: "云南", value: 83 },
        { name: "西藏", value: 9 },
        { name: "陕西", value: 80 },
        { name: "甘肃", value: 56 },
        { name: "青海", value: 10 },
        { name: "宁夏", value: 18 },
        { name: "新疆", value: 180 },
        { name: "广东", value: 123 },
        { name: "广西", value: 59 },
        { name: "海南", value: 14 },
      ];

      let option = {
        geo: [
          {
            map: "china",
            zlevel: -1,
            aspectScale: 1, // 长宽比
            // aspectScale: 1,
            layoutCenter: ["40%", "70%"],
            layoutSize: "130%",
            zoom: 1,
            roam: false,
            itemStyle: {
              normal: {
                // areaColor: "#3178cd",
                borderColor: "#c8d4e7",
                borderWidth: 1,
              },
            },
            regions: [
              {
                name: "南海诸岛",
                itemStyle: {
                  areaColor: "rgba(0, 10, 52, 1)",
                  borderColor: "rgba(0, 10, 52, 1)",
                  normal: {
                    opacity: 0,
                    label: {
                      show: false,
                      color: "#009cc9",
                    },
                  },
                },
              },
            ],
          },
          {
            map: this.chartID,
            zlevel: -2,
            aspectScale: 1, // 长宽比
            // aspectScale: 1,
            layoutCenter: ["40.5%", "70.5%"],
            layoutSize: "130%",
            zoom: 1,
            roam: false,
            itemStyle: {
              normal: {
                // areaColor: "#3178cd",
                borderColor: "#082f86",
                borderWidth: 1,
              },
            },
            regions: [
              {
                name: "南海诸岛",
                itemStyle: {
                  areaColor: "rgba(0, 10, 52, 1)",
                  borderColor: "rgba(0, 10, 52, 1)",
                  normal: {
                    opacity: 0,
                    label: {
                      show: false,
                      color: "#009cc9",
                    },
                  },
                },
              },
            ],
          },
        ],
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(50,50,50,0)",
          formatter: (item) => {
            console.log(item);
            return "";
          },
        },
        series: [
          {
            map: "china", // 使用
            zoom: 1,
            type: "map",
            roam: false,
            aspectScale: 1, // 长宽比
            // aspectScale: 1,
            layoutCenter: ["40%", "70%"],
            layoutSize: "130%",
            zoom: 1,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
              emphasis: {
                textStyle: {
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              normal: {
                borderColor: "#fff",
                borderWidth: 1,
                areaColor: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#082f86", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#082f86", // 100% 处的颜色
                    },
                  ],
                  globalCoord: true, // 缺省为 false
                },
              },
              emphasis: {
                areaColor: "#f0d103", // 鼠标悬浮颜色
                borderWidth: 0.1,

                label: {
                  show: false,
                  color: "#fff",
                },
              },
            },
            data: chinaDatas,
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            showEffectOn: "render",
            zlevel: 1,
            rippleEffect: {
              number: 3, // 波纹的数量。
              period: 5, // 动画的周期，秒数。
              scale: 17, // 动画中波纹的最大缩放比例。
              brushType: "fill", // 波纹的绘制方式，可选 'stroke' 和 'fill'。
            },
            symbolSize: 2,
            data: points,
          }, // 地图线的动画效果
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            showEffectOn: "render",
            zlevel: 1,
            rippleEffect: {
              number: 4,
              period: 5,
              scale: 21,
              brushType: "fill",
            },
            symbolSize: 3,
            data: [
              {
                value: [116.4551, 40.2539],
                itemStyle: { color: "#FFFA00" },
              },
            ],
          },
          {
            type: "lines",
            zlevel: 2,
            effect: {
              show: true,
              period: 4, // 箭头指向速度，值越小速度越快
              trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: "pin", // 箭头图标
              symbolSize: 6, // 图标大小
            },
            lineStyle: {
              normal: {
                color: "#1DE9B6",
                width: 1, // 线条宽度
                opacity: 0.1, // 尾迹线条透明度
                curveness: 0.3, // 尾迹线条曲直度
              },
            },
            data: [
              {
                coords: [
                  [116.4551, 40.2539],
                  [102.9199, 25.4663],
                ],
                lineStyle: { color: "#FFF96B" },
              },
            ],
          },
        ],
      };
      // console.log(option);
      return { option };
    },
  },
};
</script>
    
<style lang="scss" scoped >
.echarts-outer-wrapper {
  position: relative;
  width: 936px;
  height: calc((1080px - 62px - 28px) / 2);
}
.content-wrapper {
  width: 100%;
  height: calc(100% - 54px);
}
.echart-tab-wrapper {
  height: 60px;
  display: flex;
  align-items: center;
  .tabs {
    display: flex;
    height: 32px;
    line-height: 32px;
    background: linear-gradient(
      180deg,
      rgba(180, 193, 255, 0.48) 0%,
      rgba(41, 50, 93, 0) 100%
    );
    border-radius: 20px;
    overflow: hidden;
    .tab-item {
      width: 80px;
      flex: 0 0 80px;
      text-align: center;
      color: #ffffff;
      font-size: 17px;
      cursor: pointer;
    }
    .select {
      background: linear-gradient(
        180deg,
        rgba(180, 193, 255, 0.48) 0%,
        rgba(41, 50, 93, 0) 100%
      );
      border-radius: 20px;
    }
  }
}
.echart-tab-wrapper {
  float: right;
  margin-right: 100px;
  .tabs {
    .tab-item {
      width: 150px;
      flex: 0 0 150px;
    }
  }
}

.echart-content-wrapper {
  width: 100%;
  height: 100%;
  .echart {
    height: 100%;
  }
}
</style>
    